<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="icon" type="shortcut icon" th:href="@{/static/img/favicon.ico}" />
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/bootstrap.min.css}" />
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/global.css}" />
	<link rel="stylesheet" th:href="@{/static/css/login.css}" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
	<base th:href="${#servletContext.getContextPath()+'/'}">
	<title>Echo - 账号设置</title>


</head>
<body>
	<div class="nk-container">
		<!-- 头部 -->
		<header class="bg-dark sticky-top" th:replace="view\index::header"></header>

		<!-- 内容 -->
		<div class="main">
			<div class="container p-5 mt-3 mb-3">
				<!-- 上传头像图片到七牛云 -->
				<h6 class="text-left text-info border-bottom pb-2">上传头像</h6>
				<form class="mt-5" id="uploadForm" enctype="multipart/form-data" action="FileController/upload">
					<div class="form-group row mt-4">
						<label for="head-image" class="col-sm-2 col-form-label text-right">选择头像:</label>
						<div class="col-sm-10">
							<div class="custom-file">
								<input type="hidden" name="token" th:value="${uploadToken}" >
								<input type="hidden" name="key" th:value="${fileName}" >
								<input type="file" class="custom-file-input"
									   id="head-image" name="pngFile" lang="es" required="">
								<label class="custom-file-label" for="head-image" data-browse="文件">选择一张图片</label>
								<div class="invalid-feedback"></div>
							</div>
						</div>
					</div>
					<div class="form-group row mt-4">
						<div class="col-sm-2"></div>
						<div class="col-sm-10 text-center">
							<button type="submit" class="btn btn-info text-white form-control">立即上传</button>
						</div>
					</div>
				</form>

				<!-- 修改密码 -->
				<h6 class="text-left text-info border-bottom pb-2 mt-5">修改密码</h6>
				<form class="mt-5" method="post" th:action="@{/user/password}" id="formPwd">
					<input type="hidden" name="id" th:value="${session.loginUser.id}">
					<div class="form-group row mt-4">
						<label for="old-password" class="col-sm-2 col-form-label text-right">原密码:</label>
						<div class="col-sm-10">
							<input type="password" th:class="|form-control ${oldPasswordError != null ? 'is-invalid' : ''}|"
								   id="old-password" name = "oldPassword" placeholder="请输入原始密码!" th:onchange="|checkOldPwd(this.value,${session.loginUser.id})|" required>
							<div id="oldPasswordError"></div>
						</div>
					</div>
					<div class="form-group row mt-4">
						<label for="new-password" class="col-sm-2 col-form-label text-right">新密码:</label>
						<div class="col-sm-10">
							<input type="password" class="form-control"
								   th:class="|form-control ${newPasswordError != null ? 'is-invalid' : ''}|"
								   id="new-Password" name="firstPassword" placeholder="请输入新的密码!" th:onchange="comparePwd()" required>
							<div id="newPassword"></div>
						</div>
					</div>
					<div class="form-group row mt-4">
						<label for="confirm-password" class="col-sm-2 col-form-label text-right">确认密码:</label>
						<div class="col-sm-10">
							<input type="password" name="password" class="form-control" id="confirm-Password" placeholder="再次输入新密码!" th:onchange="comparePwd()" required>
							<div id="confirmPasswordError"></div>
						</div>
					</div>				
					<div class="form-group row mt-4">
						<div class="col-sm-2"></div>
						<div class="col-sm-10 text-center">
							<button type="submit" class="btn btn-info text-white form-control">立即保存</button>
						</div>
					</div>
				</form>				
			</div>
		</div>

		<!-- 尾部 -->
		<footer class="bg-dark" th:replace="view\index::footer"></footer>
	</div>

	<script th:src="@{/static/js/jquery-3.1.0.min.js}"></script>
	<script th:src="@{/static/js/popper.min.js}"></script>
	<script th:src="@{/static/js/bootstrap.min.js}"></script>
	<script th:src="@{/static/js/global.js}"></script>
	<script th:src="@{/static/js/bs-custom-file-input.js}"></script>
	<script th:src="@{/static/js/setting.js}"></script>
	<script th:src="@{/jquery/http.js}"></script>
	<script>
		var pwdFlag = false;
		// var baseUrl = "http://localhost:8002/blog/";
		// var baseUrl = "http://175.178.151.38:8002/blog/";
		var baseUrl = localStorage.getItem("baseUrl");
		$(function(){
			bsCustomFileInput.init();
		});

		$("#formPwd").submit(function () {
			submit("formPwd","UserController/updatePwd",function (data) {
				if (data.code===200){
					console.log("修改密码成功,2秒后自动跳转到登录页面");
					alert("修改密码成功,2秒后自动跳转到登录页面");
					setTimeout(function () {
						window.location.href = baseUrl + "view/site/login.html";
					},2000)
				}else {
					alert("修改失败");
				}
			});
			return false;
		});


		function checkOldPwd(oldPwd,userId) {
			$.ajax({
				url:baseUrl + "UserController/checkOldPwd/" + oldPwd +"/" + userId,
				type: "GET",
				dataType: "json",
				success: function (data) {
					console.log(data);
					if (data.code==101){
						$("#oldPasswordError").html("<span style='color: red'>" + data.msg +"</span>");
						pwdFlag = false;
						$("#oldPasswordError").show();
					}else {
						$("#oldPasswordError").hide();
						pwdFlag = true;
					}
				}
			})
		}

		function comparePwd() {
			let newPwd = $("#new-Password").val();
			let confirmPwd = $("#confirm-Password").val();
			if (newPwd !== confirmPwd){
				$("#confirmPasswordError").html("<span style='color: red'>请确保新密码与确认密码输入一致</span>");
				$("#confirmPasswordError").show();

				pwdFlag = false;
			}else {
				$("#confirmPasswordError").hide();
				pwdFlag = true;
			}

		}
	</script>
</body>
</html>
